<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="queryForm.name" placeholder="请输入广告图名称"/>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="广告管理列表">
            <template #actions>
                <el-button class="ed-button ed_black-bottom ed-button36" @click="add()"><svg-icon icon-class="add-svg" v-has="'shopping:advertisement:edit'" />添加广告</el-button>
            </template>
            <ApiTable :api="load" ref="table" :params="queryForm" @cellMouseenterHover="cellMouseenterHover" @cellMouseLeaveHover="cellMouseLeaveHover">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="广告图">
                    <template slot-scope="scope">
                        <div style="width: 100px;height: 60px;">
                            <el-image :src="scope.row.pic" :preview-src-list="[scope.row.pic]" fit="contain"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="title" label="广告图名称"/>
                <el-table-column :show-overflow-tooltip="true" prop="linkType" label="跳转">
                    <template slot-scope="scope">
                       <span v-if="scope.row.linkType==1">店铺</span>
                       <span v-else-if="scope.row.linkType==2">商品</span>
                       <span v-else-if="scope.row.linkType==0">不跳转</span>
                       <span v-else-if="scope.row.linkType==3">链接</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="显示/隐藏">
                    <template slot-scope="scope">
                        {{scope.row.showStatus == '0' ? '隐藏' : '显示'}}
                        <el-switch active-color="#EED096" inactive-color="#909399" v-model="scope.row.showStatus" :active-value="activeValue" :inactive-value="inactiveValue" @change="changeShowStatus(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间"/>
                <el-table-column :show-overflow-tooltip="true" prop="" label="操作" width="400">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" v-has="'shopping:advertisement:edit'" @click="edit(scope.row)">编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border" v-has="'shopping:advertisement:delete'" @click="del(scope.row)">删除</el-button>
                        <!-- <div class="up-down-arrow"> -->
                            <i  class="up-arrow el-icon-top colorBlue fontSize16 marginLeft20 fontWeightBold cursorPointer" @click="up(scope.row)"></i>
                            <i class="down-arrow el-icon-bottom colorBlue fontSize16 marginLeft10 fontWeightBold cursorPointer" @click="down(scope.row)"></i>
                        <!-- </div> -->
                        
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
    </Page>
</template>

<script>
    import EdTable from "src/components/EdTable.vue";
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    // import {adHide ,adShow ,adDelete ,adList,moveDown,moveUp} from "src/api/shoppingMall";
    import {adHide ,adShow ,adDelete ,adList,moveDown,moveUp} from "./api";
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import { defineComponent } from 'vue'
    export default defineComponent({
        name: "AdvertisementList",
        components:{
            EdTable,
            EdConfirmDelete,
            Page, PageCard, ApiTable
        },
        data(){
            return{
                queryForm:{
                    name:"",
                    title:'',
                    changeGo:'',
                    createTime:''

                },
                hoverId:null,
                activeValue:1,
                inactiveValue:0,
                confirmRow:{}
            }
        },
        activated(){
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        deactivated() {
            this.queryForm = {
                name:"",
                title:'',
                changeGo:'',
                createTime:''
            }
        },
        methods:{
            load:adList,
            cellMouseenterHover(row) {
                this.hoverId = row.id
            },
            cellMouseLeaveHover(row) {
                this.hoverId = null
            },
            add(){
                this.$router.push({
                    path: '/shopping/advertisement-create'
                })
            },
            edit(row){
                this.$router.push({
                    path: '/shopping/advertisement-create',
                    query: {id:row.id}
                })
            },
            
            search(){
                this.$refs.table.load(1)
            },
            reset(){
                this.queryForm = {
                    name:""
                };
                this.$nextTick(()=>{
                    this.$refs.table.load(1,10)
                })
            },
            del(row) {
                this.confirmRow = row;
                this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
            },
            confirmDeleteTrue(){
                adDelete({id: this.confirmRow.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '广告已删除成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load(1)
                    }
                })
            },
            changeShowStatus(row){
                let urlFn = null;
                if(row.showStatus === 1){
                    urlFn = adShow;
                    let arr = this.$refs.table.page.data
                    let lightArr = arr.filter(x => x.showStatus == 1)
                    if(lightArr && lightArr.length > 5) {
                        this.$message.warning("只能显示5条广告")
                        row.showStatus = 0
                        urlFn = adHide
                        return false
                    }
                }else {
                    urlFn = adHide;
                }
                urlFn({id:row.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: row.showStatus === 1 ?  '已切换为显示' : "已切换为隐藏",
                            duration: 2000,
                            center:true
                        });
                    }
                })
            },
             up(row){
                moveUp({id: row.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '类型上移成功',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load(1)
                    }
                })
            },
            down(row){
                moveDown({id: row.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '类型下移成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load(1)
                    }
                })
            },
        }
    })
</script>

<style scoped>
:deep(.up-arrow) {
    visibility: hidden; 
    
}
:deep(.down-arrow) {
    visibility: hidden; 
    
}
:deep(.table-row:hover .up-arrow) {
    visibility: visible;
    
}
:deep(.table-row:hover .down-arrow) {
    visibility: visible; 
    
}
    :deep(.table-row:first-of-type .up-arrow) {
        opacity: 0.3;
        pointer-events: none;
    }
    :deep(.table-row:last-of-type .down-arrow) {
        opacity: 0.3;
        pointer-events: none;
    }
</style>